<template>
    <common>
        <div class="ve_container">
            <el-card :body-style="{ background: 'rgba(0,0,0,0.15)' }">
                <h1>运营管理系统</h1>
                <transition name="el-fade-in-linear">
                    <el-form
                        :model="form"
                        :rules="rules"
                        v-show="!success"
                        class="ve_form"
                        ref="ref_form"
                        :inline="false"
                        @keyup.enter="onSubmit"
                    >
                        <el-form-item prop="name" v-if="!isTabLogin">
                            <el-input
                                v-model.trim="name"
                                placeholder="输入用户名"
                            >
                                <template #prepend>
                                    <el-icon :size="20">
                                        <Avatar />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="mobile">
                            <el-input
                                v-model.trim="mobile"
                                :maxlength="11"
                                placeholder="输入手机号码"
                            >
                                <template #prepend>
                                    <el-icon :size="20">
                                        <Cellphone />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="pwd">
                            <el-input
                                v-model.trim="pwd"
                                show-password
                                placeholder="输入密码"
                            >
                                <template #prepend>
                                    <el-icon :size="20">
                                        <Key />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="apwd" v-if="!isTabLogin">
                            <el-input
                                v-model.trim="apwd"
                                show-password
                                placeholder="再次输入密码"
                            >
                                <template #prepend>
                                    <el-icon :size="20">
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="btns">
                                <el-button
                                    class="ve_submit"
                                    type="primary"
                                    @click="onSubmit"
                                    round
                                >
                                    {{ isTabLogin ? '登录' : '注册' }}
                                </el-button>
                                <el-button
                                    class="ve_submit reg-btn"
                                    type="info"
                                    @click="changeReg"
                                    round
                                    plain
                                >
                                    {{
                                        isTabLogin
                                            ? '还没有账户？点击注册'
                                            : '返回登录'
                                    }}
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </transition>
            </el-card>
        </div>
    </common>
</template>

<script setup>
import { SET_TOKEN, SET_UNAME } from '@/store/modules/app/type'
import Common from '@/components/Common'
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { aceLogin, aceRegister } from '@/api/user'
import { ElMessage } from 'element-plus'
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('确认密码不能为空！'))
    } else if (value !== form.pwd) {
        callback(new Error('两次密码输入不一致，请重新输入！'))
    } else {
        callback()
    }
}
const rules = {
    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    apwd: [{ required: true, trigger: 'blur', validator: validatePass2 }]
}
const store = useStore()
const router = useRouter()
const form = reactive({
    name: '',
    pwd: '',
    apwd: '',
    mobile: ''
})
const { name, pwd, apwd, mobile } = toRefs(form)
const ref_form = ref(null)
const success = ref(false)
const isTabLogin = ref(true)
sessionStorage.clear()
store.dispatch(`app/${SET_TOKEN}`, '')
router.options.isAddDynamicMenuRoutes = false
const handleLogin = (data) => {
    console.log(data, '------++++++')
    store.dispatch(`app/${SET_TOKEN}`, data.data)
    // store.dispatch(`app/${SET_UNAME}`, name)
    window.localStorage.setItem('token', data.data)
    window.localStorage.setItem('userRule', 'admin')
    window.localStorage.setItem('userInfo', JSON.stringify(data))
    success.value = true
    router.push({ name: 'AppMain' })
}
const onSubmit = () => {
    ref_form.value.validate(async (valid) => {
        if (valid) {
            if (isTabLogin.value) {
                // 登录
                const data = await aceLogin({
                    mobile: form.mobile,
                    password: form.pwd
                })
                if (!data.code) {
                    ElMessage.success('登录成功！')
                    handleLogin(data)
                }
            } else {
                // if (form.userName === 'admin') {
                //     ElMessage.warning('管理员账号不能重复注册！')
                //     return
                // }
                // 注册 { "name": "admin", "password": "a123456", "mobile": "15915941956" }
                const data = await aceRegister({
                    name: form.name,
                    password: form.pwd,
                    mobile: form.mobile
                })
                console.log(data, '==')
                if (!data.code) {
                    const sdata = await aceLogin({
                        mobile: form.mobile,
                        password: form.pwd
                    })
                    if (!sdata.code) {
                        ElMessage.success('注册成功！')
                        handleLogin(sdata)
                    }
                }
            }
        } else {
            return
        }
    })
}
const changeReg = () => {
    isTabLogin.value = !isTabLogin.value
}
</script>

<style lang="scss" scoped>
.ve_container {
    position: absolute;
    z-index: 1;
    width: 400px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    transition: all 1s;
    min-height: 273px;
    text-align: center;

    h1 {
        font-size: 24px;
        transition: all 1s;
        font-weight: bold;
        margin-bottom: 36px;
    }

    .ve_form {
        .ve_submit {
            width: 250px;
        }

        :deep(.el-input-group__prepend) {
            padding: 0 10px;
        }
    }

    .btns {
        text-align: center;
        margin: 0 auto;

        .reg-btn {
            margin-top: 10px;
            margin-left: 0;
        }
    }
}
</style>
